<script>
import MainHeader from "@/components/MainHeader.vue";
import ObsClient from "esdk-obs-browserjs/src/obs.js";
import {v4 as uuidv4} from "uuid";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "publish",
  components: {MainHeader},
  data(){
    return {
      selectCategory: "",
      selectedFile: "",
      contextTitle:"",
      imgUrl:"",
      userID:"",
      IsUploading:false,
      audioSrc:"",
    }
  },
  methods: {
    backToIndex(){
      this.$router.push("/");
    },
    uploadSuccess(){
      ElMessageBox.alert("上传成功","",{
        confirmButtonText:"好的"
      })
    },
    handleSelectImage(event) {
      this.selectedFile = event.target.files[0];
      this.imgUrl = URL.createObjectURL(this.selectedFile);
      this.audioSrc = URL.createObjectURL(this.selectedFile);
    },
    publishResource() {
      if(this.selectCategory==""||this.contextTitle==""){
       alert("请填写完整信息")
        return;
      }
      this.IsUploading=true
      const obsClient=new ObsClient({
        access_key_id: "EC6NJERUTMSFVKRZ1QSJ",
        secret_access_key_id: "G61l6MjbSE1IKRY7Hb6daQ4IaeZCJx4nq79ohmmd",
        server:"https://obs.cn-south-1.myhuaweicloud.com"
      });
      const uuid=uuidv4();

      obsClient.putObject({
        Bucket:"dmsgame",
        Key:`JavaEEObject/用户资源/${uuid+this.selectedFile.name}`,
        SourceFile:this.selectedFile,
      },(err,data)=>{

        console.log("发送");
        if (!err){
          this.uploadSuccess();
          this.IsUploading=false;
          const token=localStorage.getItem("token");
          axios.post("http://113.44.66.99:8080/getMessage",{},{
            headers:{
              Authorization:token
            }
          }).then(res=>{
            this.userId=res.data.data.userId;
       console.log("用户id",res.data.data.userId);
            const formData ={
              contextTitle:this.contextTitle,
              category:this.selectCategory,
              contentResource:`https://dmsgame.obs.cn-south-1.myhuaweicloud.com/JavaEEObject/用户资源/${uuid + this.selectedFile.name}`,
              encourageCount:0,
              userId:this.userId,
            }
            axios.post("http://113.44.66.99:8080/publishResource",formData,{}).then(res=>{
              console.log(res);

            })
          })


        }
      })
    }
    ,
    // testMethod(){
    //   const token=localStorage.getItem("token");
    //   console.log(token);
    //   axios.post("http://113.44.66.99:8080/getMessage",{},{
    //     headers:{
    //       Authorization:token
    //     }
    //   }).then(res=>{
    //     console.log(res);
    //
    //   })
    // }

  }
}
function getUserMessage(){
  const token=localStorage.getItem("token");
    console.log(token);
    axios.post("http://113.44.66.99:8080/getMessage",{},{
      headers:{
        Authorization:token
      }
    }).then(res=>{
      return res.data.data;
    })

}
</script>

<template>
  <MainHeader></MainHeader>

<div class="flex w-full h-screen  justify-center items-center flex-col">
  <div class="text-center text-6xl animate__animated animate__infinite animate__heartBeat">发布你的资源</div>
  <div style="height:500px;" class="w-1/2  flex justify-center flex-col  items-center ">

     <el-form>
       <el-form-item class="w-80" >
         <el-input type="textarea"size="large"  placeholder="介绍一下吧" v-model="contextTitle"></el-input>
       </el-form-item>

       <el-form-item>
         <el-select v-model="selectCategory" placeholder="请选择分类">
           <el-option label="音乐" value="音乐">

           </el-option>
           <el-option label="视频" value="视频">

           </el-option>
           <el-option label="图片" value="图片">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item class="flex items-center justify-center">
         <label for="picInput" v-if="selectCategory=='图片'" class="flex justify-center items-center "><div class="w-80"><el-empty description="上传图片" :image="imgUrl"/></div></label>
         <input type="file" @change="handleSelectImage" id="picInput" class="hidden" accept="image/*">
         <label for="audioInput" v-if="selectCategory=='音乐'" >
          <div class="border-1 text-center">点我上传音频 <audio :src="audioSrc" controls></audio></div>
         </label>
         <input type="file" @change="handleSelectImage" id="audioInput" class="hidden" accept="audio/*">
         <label for="videoInput" v-if="selectCategory=='视频'"><div class="text-center">点我上传视频<video :src="this.audioSrc"></video></div></label>
         <input type="file" @change="handleSelectImage" id="videoInput" class="hidden" accept="video/*">
       </el-form-item>
     </el-form>
    <el-button @click="publishResource" class="w-20 ml-20">发布！</el-button>
      <div v-if="IsUploading">上传中....</div>
      <div class="h-1/6"></div>
    <div class="hover:cursor-pointer rounded-full bg-gray-600/50 w-64 hover:brightness-150  text-center " @click="backToIndex">点我返回首页←←←</div>
  </div>
</div>

</template>

<style scoped>
body{
  *{
    margin:0;
    padding:0;
  }
}
</style>